<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8"> 
<title>省市区三级联动</title> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js"></script>
   <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color:#eee;
            font-family:"Microsoft YaHei";
        }
        .container{
            margin-top:100px;
        }
        .title{
            text-align:center;
            color:#990000;
        }
        .info{
            text-align:center;
            margin-top:20px;
        }
        select{
            border:1px solid #993300;
        }
        #province,#city{
            margin-right:10px;
        }
    </style> 
</head> 
<body> 
  <div class="container">
        <h1 class="title">全国城市三级联动</h1>
        <div class="info">
            <select name="province" id="province" onchange="selCity()">
                <!-- <option value="">省份</option> -->
            </select>
            <select name="city" id="city" onchange="selArea()">
               <!--  <option value="">地级市</option> -->
            </select>
            <select name="area" id="area" onchange="selAddr()">
                <!-- <option value="">区、县级市</option> -->
            </select>
        </div>
        <div class="info">
        	<span id="addr"></span>
        </div>
    </div> 
</body> 

 <script>
 
 $(function() { 
	    
	  //var address = $("#pro_city"); 
	  var province = $("#province"); 
	  var city = $("#city"); 
	  var area = $("#area"); 
	  var preProvince = "<option value=\"\">选择省（市）</option>"; 
	  var preCity = "<option value=\"\">选择市（区）</option>"; 
	  var preArea = "<option value=\"\">选择区（县）</option>"; 
	    
	  //初始化 
	  province.html(preProvince); 
	  city.html(preCity); 
	  area.html(preArea); 
	  //初始化省
	  selProvince();
});	  
	  
	 function selProvince(){
		 $.ajax({
       	  url:'${pageContext.request.contextPath}/regionState/selProvince.jspx',
       	  type:'post',
       	  dataType:'json',
       	  success:function(data){
       		if(data.code==0){
       			for(var i=0; i<data.content.length; i++){  
                    $("#province").append($("<option value="+data.content[i].sysid+">"+data.content[i].regionstateName+"</option>"));  
                }  
       		}
       	  },
       	  error:function(){
       		  console.log("数据异常！");
       	  }
         }); 
	 }
	 
	 function selCity(){
		 var provinceID =  $("#province option:selected").val();
		 $("#city").html("<option value=\"\">选择市（区）</option>"); 
		 $("#area").html("<option value=\"\">选择区（县）</option>"); 
		 $.ajax({
	       	  url:'${pageContext.request.contextPath}/regionState/selCityByprovinceID.jspx',
	       	  data:{"provinceID":provinceID},
	       	  type:'post',
	       	  dataType:'json',
	       	  success:function(data){
	       		if(data.code==0){	       			
	       			for(var i=0; i<data.content.length; i++){  
	                    $("#city").append($("<option value="+data.content[i].sysid+">"+data.content[i].regionstateName+"</option>"));  
	                }  
	       		}
	       	  },
	       	  error:function(){
	       		  console.log("数据异常！");
	       	  }
	     }); 
	 }
	 
	 function selArea(){
		 var cityID =  $("#city option:selected").val();
		 $("#area").html("<option value=\"\">选择区（县）</option>"); 
		 $.ajax({
	       	  url:'${pageContext.request.contextPath}/regionState/selAreaBycityID.jspx',
	       	  data:{"cityID":cityID},
	       	  type:'post',
	       	  dataType:'json',
	       	  success:function(data){
	       		if(data.code==0){	       			
	       			for(var i=0; i<data.content.length; i++){  
	                    $("#area").append($("<option value="+data.content[i].sysid+">"+data.content[i].regionstateName+"</option>"));  
	                }  
	       		}
	       	  },
	       	  error:function(){
	       		  console.log("数据异常！");
	       	  }
	    }); 
	 }
	 
	 function selAddr(){
		 var areaID = $("#area option:selected").val();
		 $("#addr").html("");
		 $.ajax({
			 url:'${pageContext.request.contextPath}/regionState/selAddrByAreaID.jspx',
			 data:{"areaID":areaID},
			 type:'post',
			 dataType:'json',
			 success:function(data){
				 if(data.code == 0){
					 $("#addr").append("地址为:"+data.content);
				 }
			 },
			 error:function(data){
				 console.log("数据异常");
			 }
		 });
	 }
	 
 
 </script>
</html>